<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="displayModuleTitle"
    @ok="onButtonOkClick"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, inject, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';

  import { setProjectParamSchema } from './project.data';
  import { getProject, setProjectParams } from '/@/api/project/project';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  const { createMessage } = useMessage();

  export default defineComponent({
    name: 'AddOrUpdateProject',
    components: { BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      //弹出窗口界面是新增数据、修改数据；根据传递过来的参数进行判断
      const operateType = ref(OperationTypeEnum.UN_KNOWN);

      const dataId = ref('');
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const [registerForm, { setFieldsValue, resetFields, validate, updateSchema }] = useForm({
        labelWidth: 80,
        schemas: setProjectParamSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      /**
       * 根据父组件传递过来的参数获取对应的操作，操作不同所对应的界面不同
       */
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log(data);

        if (data != undefined && data != null) {
          let unrefData = unref(data); //接收父组件传递的数据
          qcUnifyProps.value = unrefData;
          if (unrefData?.operateType) {
            //判断是否传入op属性
            operateType.value = unrefData.operateType;
          }

          if (unrefData?.dataId) {
            dataId.value = unrefData.dataId;
          }
        }

        resetFields(); //重置表单
        setModalProps({ confirmLoading: false });
        getProjectById();
      });

      /**
       * 根据部门id获取部门详细信息，用于编辑回显
       */
      async function getProjectById() {
        let flagOptions = [];
        flagOptions.push({ label: '启用', value: '0' }, { label: '禁用', value: '5' });
        getProject(dataId.value)
          .then((res) => {
            if (res.params && res.params.length > 0) {
              setFieldsValue({
                ...res,
                // params: param,
              });
            } else {
              setFieldsValue({
                ...res,
                params: '',
              });
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 点击确认按钮，根据不同的op调用对应方法保存信息
       */
      async function onButtonOkClick() {
        //根据指定的操作类型分别进行提交数据和处理
        const values = await validate();
        setModalProps({ confirmLoading: true });
        //调用接口进行保存
        setProjectParams({
          ...values,
        })
          .then((res) => {
            if (!res || Object.keys(res).length == 0) {
              createMessage.success('修改成功。', 2);
            }
            opSuccess();
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      //操作成功后
      function opSuccess() {
        closeModal();
        emit('success');
      }

      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      return {
        operateType,
        displayModuleTitle,
        registerModal,
        registerForm,
        onButtonOkClick,
        getProjectById,
        opSuccess,
      };
    },
  });
</script>
